<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	
	@import "./fonts/iconfont.css";
	
	body,html{ background: #FCFCFC;}
	
	
	
	.ch-clear{ clear: both;}
.ch-fl{ float: left;}
.ch-fr{ float: right;}
.ch-flex-wrap{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: wrap; -ms-flex-flow: wrap; flex-flow: wrap;}
.ch-posfl{ position: absolute; left: 0;}
.ch-posfr{ position: absolute; right: 0;}

/*字号大小*/
.ch-title,.ch-title2,.ch-title3{ font-family:"\5FAE\8F6F\96C5\9ED1";   display: inline-block;}
/*大字号一般用于数字*/
.ch-title-b{font-size:48upx; color:#333 ; font-weight: bold;}
/*一般用于栏目大标题*/
.ch-title{font-size:44upx; color:#333 ; font-weight: bold;}
/*一般用于列表的标题*/
.ch-title2{font-size:36upx; color: #333; font-weight: bold;}
/*一般用于列表的副标题*/
.ch-title3{font-size:28upx; color: #A1ADB6;}
/*一般用于标题小子*/
.ch-title4{font-size:24upx; color: #A1ADB6;}
/*用于文章内容的文字*/
.ch-content{ font-size: 30upx; color: #5b6066;}
/*文字加粗*/
.ch-bold{ font-weight: bold;}



/*文字不换行结尾3个点*/
.ch-ellipsis{ overflow: hidden;  white-space: nowrap;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;}

/*文字2行结尾3个点*/
.ch-ellipsis2{ -o-text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;  overflow: hidden;  -o-text-overflow: ellipsis;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}

/*文字3行结尾3个点*/
.ch-ellipsis3{ -o-text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;  overflow: hidden;  -o-text-overflow: ellipsis;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;}

/*高光样式1*/
.ch-active{ position: relative; z-index: 0;  font-weight: bold; color:#293949;
}
.ch-active::before{ content: ""; position:absolute; z-index: -1; height: 20upx; width: 65%; border-radius: 5upx; background: #81B437; bottom:5upx; left: 0%;
}
.ch-active::after{content: "";  position:absolute; z-index: -1; height: 20upx; width: 15%; border-radius: 5upx; background: #81B437; bottom: 5upx;  left: 85%;}

/*高光样式2*/
.ch-active2{ position: relative; z-index: 0;  font-weight: bold; color:#293949;
}
.ch-active2::before{ content: ""; position:absolute; z-index: -1; height:5upx; width: 50%; border-radius: 5upx; background: #81B437; bottom:-10upx; left: 10%;
}
.ch-active2::after{content: "";  position:absolute; z-index: -1; height:5upx; width: 10%; border-radius: 5upx; background: #81B437; bottom: -10upx;  left: 70%;}

/*卡片列表样式*/
.ch-wrap{margin-left: 30upx;	margin-right: 30upx;  position: relative;}
.ch-card {margin-left: 30upx;	margin-right: 30upx; -webkit-box-shadow: none; box-shadow: none;position: relative;	display: -webkit-box;	display: -webkit-flex;	display: -ms-flexbox;	display: flex;	-webkit-box-orient: vertical;	-webkit-box-direction: normal;	-webkit-flex-direction: column;	-ms-flex-direction: column;	flex-direction: column;	overflow: hidden; 	margin-bottom: 80upx; margin-top: 40upx;}
.ch-padding-top{ margin-top: 30upx; margin-left: 30upx;	margin-right: 30upx; position: relative;}
.ch-padding-bottom{ margin-bottom: 30upx; margin-left: 30upx;	margin-right: 30upx; position: relative;}



/* 图片上的透明标题角标 */
.ch-badge-top-left{ border-bottom-right-radius:30upx; border-top-left-radius:10upx; background: rgba(0,0,0,0.5); color: #fff; padding: 10upx; position: absolute; top: 0; left: 0; font-size: 24upx;
}
.ch-badge-top-right{ border-bottom-left-radius:30upx; border-top-right-radius:10upx; background: rgba(0,0,0,0.5); color: #fff; padding: 10upx; position: absolute; top: 0; right: 0; font-size: 24upx;
}
.ch-badge-bottom-left{ border-top-right-radius:30upx; border-bottom-left-radius:10upx;  background: rgba(0,0,0,0.5); color: #fff; padding: 10upx; position: absolute; bottom: 0; left: 0; font-size: 24upx;
}
.ch-badge-bottom-right{ border-top-left-radius:30upx; border-bottom-right-radius:10upx; background: rgba(0,0,0,0.5); color: #fff; padding: 10upx; position: absolute; bottom: 0; right: 0; font-size: 24upx;
}
.ch-bjimg{ background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 500upx;border-radius: 20upx; margin-bottom: 20upx;}


/*卡片的用户信息 时间*/
.ch-userinfo{ margin-bottom: 10upx;}
.ch-rel-face{ height: 40upx; width:40upx; display:inline-block; border-radius: 50%; background-position: center;background-size: cover; background-repeat: no-repeat; margin-right: 10upx;}
.ch-rel-username{ font-size: 28upx;  line-height: 40upx; margin-right: 20upx; position: relative; top:-10upx; color: #5B6066;}
.ch-rel-date{ font-size: 28upx; color: #5B6066; line-height: 40upx; position: relative; top:-10upx;}

/*卡片的用户信息 时间 2*/
.ch-userinfo2{margin-top: 20upx; width: 100%;}
.ch-userinfo2 .ch-rel-face{ height: 40upx; width:40upx; display:inline-block; border-radius: 50%; background-position: center;background-size: cover; background-repeat: no-repeat; margin-right: 10upx;}
.ch-userinfo2 .ch-rel-username{ font-size: 28upx;  line-height: 40upx; margin-right: 20upx; position: relative;  color: #5B6066;}
.ch-userinfo2 .ch-rel-date{ font-size: 24upx; color: #A1ADB6; line-height: 40upx; position: relative; top:10upx;
}
.ch-card-heng {margin-left: 30upx;	margin-right: 30upx; /* box-shadow:2upx 4upx 10upx #D2D2D2; */ position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; -webkit-flex-flow: wrap; -ms-flex-flow: wrap; flex-flow: wrap;	overflow: hidden; margin-bottom: 40upx; /* padding:30upx 20upx; */ border-radius: 10upx;}
.ch-bjimg-heng{ width: 100%; height: 180upx; display: block; border-radius: 10upx; background-position: center; background-size: cover; background-repeat: no-repeat;}




/*布局排版*/
.ch-w-1-1{ width: 100%; position: relative;}
.ch-w-3-1{ width: 34%; position: relative;}
.ch-w-3-2{ width: 66%;position: relative;}

.ch-w-4-1{ width: 25%;position: relative;}
.ch-w-4-2{ width: 50%;position: relative;}
.ch-w-4-3{ width: 75%;position: relative;}

.ch-w-10-1{ width: 10%; position: relative;}
.ch-w-10-2{ width: 20%; position: relative;}
.ch-w-10-3{ width: 30%; position: relative;}
.ch-w-10-4{ width: 40%; position: relative;}
.ch-w-10-5{ width: 50%; position: relative;}
.ch-w-10-6{ width: 60%; position: relative;}
.ch-w-10-7{ width: 70%; position: relative;}
.ch-w-10-8{ width: 80%; position: relative;}
.ch-w-10-9{ width: 90%; position: relative;}


/*分割线*/ 
.ch-l-xian:before{ content: "";  height: 100%;   width: 1upx;    position: absolute;   background: #eee;   top: 0%;}

.ch-r-xian:after{ content: "";  height: 100%;   width: 1upx;    position: absolute;   background: #eee;   top: 0%; right: 0;}


/*更多按钮*/
.ch-more{   background: rgba(217,233,194,0.5);  margin-left: 30upx;	margin-right: 30upx; position: relative; text-align: center; font-size: 28upx; line-height: 60upx; color:#4E7511 ; margin-bottom: 40upx;}



/*阴影样式*/
.ch-shadow{-webkit-box-shadow:2upx 4upx 10upx #D2D2D2;box-shadow:2upx 4upx 10upx #D2D2D2;}
.ch-shadow2{-webkit-box-shadow:2upx 4upx 30upx #D2D2D2;box-shadow:2upx 4upx 10upx #D2D2D2;}

/*内边距*/
.ch-padding{ padding: 20upx 20upx; }
.ch-margin-top{ margin-top: 40upx;}
.ch-margin-right{ margin-right:10upx ;}


/*背景图片居中样式*/
.ch-bg{ background-position: center; background-position: center; background-repeat: no-repeat; background-size: cover; } 
	
/*角标动画*/
.ch-icon-arrow-r{ position: absolute; z-index: 5; right: 20upx; top: 40%;}	
.ch-paly-x{ animation:paly-x 1s infinite; }
 @keyframes paly-x
		{
		0%   {right:20px;}
		40%  {right:10px;}
		100% {right:20px;}
		}	
.ch-paly-y{ animation:paly-y 1s infinite; }
	 @keyframes paly-y
		{
		0%   {right:20px;}
		40%  {right:10px;}
		100% {right:20px;}
		}

/*圆角*/
.ch-radius{ border-radius: 15upx;}
.ch-radius2{ border-radius: 10upx;}
/*文字居中*/
.ch-font-center{ text-align: center; }
.ch-font-left{ text-align: left; }
.ch-font-right{ text-align: right; }
/*块级标签居中*/
.ch-mar-center{ margin: 0 auto;}

/*字颜色*/
.ch-color-lan{ color: #0081FF; }
.ch-colo-huang{ color: #FBBD08;}
.ch-color-lv{ color: #81b434;}
.ch-color-hong{ color: #E54D42;}
.ch-color-zi{color: #9C26B0;}
.ch-color-fen{color: #E13998;}
.ch-color-he{ color:#A56740 ;}
.ch-color-he{ color:#A56740 ;}
.ch-color-hei{ color:#333333 ;}
.ch-color-bai{ color:#fff ;}
.ch-color-hui{ color:#A1ADB6;}

/* 边框 */
.ch-border-lv{ border: 1upx #81b434 solid;}


.ch-bj-bai{ background: #fff;}

.ch-bottom-xian{ border-bottom: 1upx #eee solid;}
	
</style>
